<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input id="search" type="text" autocomplete="off">

    <script src="./jq/jq.js"></script>
    <script>
        // let timer = null;
        // $('#search').on('input', function () {
        //     if (!timer) {
        //         console.log($(this).val());
        //         timer = setTimeout(() => {
        //             timer = null;
        //         }, 1000);
        //     }
        // });

        // 装饰者模式 throttle
        function throttle (fn, interval) {
            let timer = null;
            return function (...args) {
                if (!timer) {
                    fn.call(this, ...args);
                    timer = setTimeout(() => {
                        timer = null;
                    }, interval);
                }
            };
        }

        function search () {
            console.log($(this).val());
        }

        const throttleSearch = throttle(search, 1000);
        
        // 发布订阅模式
        $('#search').on('input', throttleSearch);

        // 小案例
        function run (a, b) {
            console.log(a + b);
        }

        const tRun = throttle(run, 1000);

        setInterval(() => {
            tRun(Math.random(), Math.random());
        }, 50);

        // 1000ms 打印一下

    </script>
</body>
</html>